<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order">
        <!--  border-card"卡片纸样式 -->
        <el-tabs type="border-card">
          <el-tab-pane label="点餐">
            <!--  border:边框 stripe:斑马线 -->
            <el-table empty-text="暂无商品信息" stripe border :data="orderData" style="width:100%">
              <el-table-column prop="name" label="商品" align="center" width="100"></el-table-column>
              <el-table-column prop="num" align="center" label="数量"></el-table-column>
              <el-table-column prop="price" align="center" label="价格"></el-table-column>
              <el-table-column fixed="right" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="samll">增加</el-button>
                  <el-button type="text" size="samll">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="order-btn"> 
              <el-button type="success" icon="el-icon-success" >结账</el-button>
              <el-button type="warning" icon="el-icon-edit">挂单</el-button>
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单">
          </el-tab-pane>
          <el-tab-pane label="外卖">
          </el-tab-pane>
      </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="hot-goods">
          <div class="hot-title">
            <span>热销商品</span>
          </div>
          <div class="hot-list">
            <ul>
              <!-- 直接写v-for会报错:[eslint-plugin-vue] [vue/require-v-for-key] -->
              <!-- vue文档规定使用v-for后最好给它绑定一个key,所以你再写个:key="your codes"即可 -->
              <li v-for="(good,index) in hotData" :key="index">
                <span>{{good.hotName}}</span>
                <span class="hot-price">${{good.hotPrice}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs type="border-card">
            <el-tab-pane label="主食">
                <ul class="food-type">
                  <li v-for="(item,index) in orderData" :key="index">
                    <span class="food-img"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4042926313,298175800&fm=27&gp=0.jpg" width="100%" alt=""></span>
                    <span class="food-name">{{item.name}}</span>
                    <span class="food-price">${{item.price}}</span>
                  </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane label="烧烤">

            </el-tab-pane>
            <el-tab-pane label="小吃">

            </el-tab-pane>
            <el-tab-pane label="饮料">

            </el-tab-pane>

          </el-tabs>

        </div>



      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello Pos',
      //订单数据
      orderData: [{
          name: '羊肉串',
          num: 5,
          price: 20,
        }, {
           name: '石锅拌饭',
          num: 1,
          price: 12,
        }, {
         name: '炸鸡',
          num: 5,
          price: 40,
        }, {
          name: '可乐',
          num: 5,
          price: 20,
        }],
        //热销商品
        hotData:[
          {
            hotName:'石锅拌饭',
            hotPrice:12
          },
          {
            hotName:'煎蛋',
            hotPrice:1.5
          },
          {
            hotName:'臊子面',
            hotPrice:10
          },
           {
            hotName:'石锅拌饭',
            hotPrice:12
          },
          {
            hotName:'煎蛋',
            hotPrice:1.5
          },
          {
            hotName:'臊子面',
            hotPrice:10
          }, {
            hotName:'石锅拌饭',
            hotPrice:12
          },
          {
            hotName:'煎蛋',
            hotPrice:1.5
          },
          {
            hotName:'臊子面',
            hotPrice:10
          }, {
            hotName:'石锅拌饭',
            hotPrice:12
          },
          {
            hotName:'煎蛋',
            hotPrice:1.5
          },
          {
            hotName:'臊子面',
            hotPrice:10
          }
        ]
    }
  },
  //dom挂在完成后钩子函数
  mounted:function(){
    var bodyHeight=document.body.clientHeight;
    //手动设置宽度100%
    var order=document.getElementById("order");
    order.style.height=bodyHeight+"px";
  }
}
</script>
<style scoped>
.order-btn{
  margin-top: 20px;
}
.pos-order{
  background-color: rgb(239, 245, 245);
  border-right: 1px solid rgb(238, 225, 46);
}
.hot-title{
  border-bottom: 1px solid #D3DCE6;
  background-color: rgb(245, 246, 248);;
  text-align: left;
  height: 20px;
  padding: 10px;
}
.hot-list ul li{
  list-style: none;
  background-color: rgb(243, 246, 247);
  padding: 15px;
  float: left;
  border: 1px solid #D3DCE6;
  margin:15px;

}
.hot-price{
  color: #409EFF;
}
.goods-type{
  /* 元素两侧不允许出现浮动 */
  clear: both;
}
.food-type li{
  list-style: none;
  border:1px solid #E5E9F2;
  width:22%;
  float: left;
  height: auto;
  padding: 2px;
  overflow: hidden;
  background-color:#fff;
  margin:5px;
}
.food-type li span{
  display: block;
  float: left;
}
.food-img{
  width:50%;
}
.food-name{
    font-size: 24px;
    padding-left: 20px;
    color:brown;
    text-align: center;
}
.food-price{
    font-size: 20px;
    padding-left: 40px;
    padding-top:20px;
}
/* scoped 表示当前页面有效 */
/* 字体图标大小选择样式 */
.iconfont.ft16{font-size: 16px}
.iconfont.ft24{font-size: 24px} 
.iconfont.ft32{font-size: 32px} 
.iconfont.ft48{font-size: 48px} 
.iconfont.ft64{font-size: 64px} 
</style>
